<template>
  <div class="wrap">
    <head-title :title="headText" @callback="onClickLeft"></head-title>
    <div class="order wrapbd">
      <div class="orderdetail margin20">
        <div class="adddelation" style="background-color: #f44;">
          <h3 class="status-box">
            <van-icon class="icon-t" name="warn" style="position: relative;color: #fff;right: 0;top:.1rem;;"/>
            <span style="display: inline;">{{orderDetail.status_text}}</span>
            <span v-if="orderDetail.status==0" style="display: inline; margin-left: 2rem;">剩余：<label>{{hour}}小时 {{minu}}分 {{secs}}秒</label></span>
          </h3>
        </div>
        <div class="adddelation">
          <span class="c-title">基本信息</span>
          <span><h2 class="left">订单号：{{orderDetail.order_no}}</h2></span>
          <span><h2 class="left" style="margin-bottom: 0;">下单时间：{{orderDetail.create_time_show}}</h2></span>
        </div>
        <div class="adddelation" style="padding-top: .1rem;">
          <span class="c-title">收货地址</span>
          <span><h2 class="left">收货人：{{orderDetail.address_user_name}}</h2><h2 class="right">{{orderDetail.address_moble}}</h2></span>
          <div>
            <p>{{orderDetail.address_text}}</p>
            <!--<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>-->
          </div>
        </div>
        <div class="adddelation" style="padding-top: .1rem;">
          <span class="c-title">支付方式</span>
          <p v-if="checkout_type==1">在线支付</p>
        </div>
        <div class="adddelation" style="padding-top: .1rem;">
          <span class="c-title">配送方式</span>
          <p v-if="express_type==1">物流发货</p>
          <p v-if="express_type==2">到店自提</p>
          <span v-show="express_type==1" class="express-tips">运费：{{parseFloat(orderDetail.express_money)>0?orderDetail.express_money:'包邮'}}</span>
          <span v-show="express_type==2" class="express-tips">地址：{{orderDetail.shop_address}}</span>
          <span v-show="express_type==2" class="express-tips">电话：{{orderDetail.shop_mobile}}</span>
        </div>
        <div class="productdetail">
          <ul>
            <li v-for="(item,index) in orderDetail.product_list" :key="index">
              <i class="left"><img :src="item.cover_img"></i>
              <span class="left"><p>{{item.product_name}}&nbsp&nbsp{{item.spec_name_full}}</p><label>单价：{{item.unit_money}}</label><label>购买数量：{{item.buy_num}}</label></span>
              <b>￥{{item.p_total_money}}</b>
            </li>
          </ul>
        </div>
        <div class="product-t">共<i>{{orderDetail.buy_num_total}}</i>件，商品合计：<i>￥{{orderDetail.total_money_pro}}</i></div>
      </div>
      <div class="allOrder" v-if="status===0">
        <p class="left">总额：<label>￥{{orderDetail.total_money}}</label></p>
        <div class="sumbOrder right" @click="payOrder(orderDetail.order_no)">支付</div>
      </div>
      <div class="allOrder" v-if="status===1">
        <div class="sumbOrder left" @click="backOrder(orderDetail.order_no)" style="background-color: #c9c9c9">申请退款</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===2">
        <div class="sumbOrder left" @click="backOrder(orderDetail.order_no)" style="background-color: #c9c9c9">申请退款</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===3">
        <div v-if="orderDetail.can_back == 1" class="sumbOrder left" @click="backOrder(orderDetail.order_no)" style="background-color: #c9c9c9">申请退款</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===4">
        <p class="left"></p>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===5">
        <p class="left"></p>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===6">
        <p class="left"></p>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===7">
        <div class="sumbOrder left" style="background-color: #c9c9c9">退款处理中...</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===8">
        <div class="sumbOrder left" style="background-color: #c9c9c9">此商品已不支持退款</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
      <div class="allOrder" v-if="status===9">
        <div class="sumbOrder left" style="background-color: #c9c9c9">已退款</div>
        <div class="sumbOrder right" style="color: #ea8800;background-color: #fff;width: 40%;">总额：<label>￥{{orderDetail.total_money}}</label></div>
      </div>
    </div>
  </div>
</template>
<script>
  import HeadTitle from "./../../components/title.vue"
  import { Icon,Dialog } from 'vant';
  export default {
    data(){
      return {
        headText: '订单详情',  //顶部标题
        orderDetail:{},//订单详情
        checkout_type: '1',
        status:'',
        express_type: '1',//配送方式
        countTime: '',  //时间戳
        hour: '', //时
        minu:'',  //分
        secs:'',  //秒
        orderNo: this.$route.query.id,
        backMoneyList: []
      }
    },
    mounted(){
      var _this = this;
      _this.initialize();  //拉取商品详情信息
    },
    methods:{
      //左上角返回键
      // onClickLeft () { this.$route.query.type == 1 ? this.$router.push('/shoppingcart') : this.$router.push('/mall')},
      onClickLeft () { this.$router.push('/record') },
      //获取地址信息
      initialize(){
        this.inOrderDetail();
      },
      //退款理由列表
      getBackMoneyList() {
        var _this = this;
        this.Tools.AXIOS({
          url: 'order/backmoneylist',
          transformRequest: {},
          success: function (res) {
            _this.backMoneyList = res.data.data;
          },error: function(res){}
        })
      },
      //获取商品详情
      inOrderDetail(){
        var _this = this;
        this.Tools.AXIOS({
          url: 'order/detail',
          transformRequest: {
            order_no: this.orderNo
          },
          success: function (res) {
            _this.orderDetail = res.data.data;
            _this.express_type = res.data.data.express_type;
            _this.status = res.data.data.status;
            _this.countTime = res.data.data.count_down_time;   //获取时间戳
            _this.hour = parseInt(_this.countTime / 3600); //时
            _this.minu = parseInt(_this.countTime % 3600 / 60);   //分
            _this.secs = _this.countTime % 60;   //秒
            if(res.data.data.status == 0) {
              _this.countCodeTime();
            }
            _this.backMoneyList = res.data.data.back_money_text;
          },error: function(res){
            this.$toast({message: res.data.msg, position: 'bottom',duration: 3000})
          }
        })
      },
      //倒计时
      countCodeTime:function () {
        let _this = this;
        let interval = setInterval(function () {
          if(_this.countTime == 0){
            clearInterval(interval);
            _this.Tools.AXIOS({
              url: 'order/expire',
              transformRequest: {
                order_no: _this.orderNo
              },
              success: function (res) {
                _this.orderDetail.status = 4;
                _this.status = 4;
                _this.orderDetail.status_text = '超时自动取消';
              },error: function(res){}
            })
          }else{
            _this.countTime --;
            _this.hour = parseInt(_this.countTime / 3600); //时
            _this.minu = parseInt(_this.countTime % 3600 / 60);   //分
            _this.secs = _this.countTime % 60;   //秒
          }
        },1000)
      },
      //支付
      payOrder(order_no){
        this.$router.push({path:'orderPay',query:{order_no:order_no}});
      },
      //申请退款
      backOrder( order_no ){
        let _this = this;
        Dialog.confirm({
          title: '温馨提示',
          message: '确定要申请退款吗？'
        }).then(() => {
          _this.Tools.AXIOS({
            url: 'order/backmoney',
            transformRequest: {
              order_no: order_no
            },
            success: function (res) {
              _this.$toast({message: res.data.msg, position: 'bottom',duration: 3000})
              window.location.reload();
            },error: function(res){}
          })
          window.location.reload();
        });
      }
    },
    components: {
      HeadTitle,
      [Icon.name]: Icon,
      [Dialog.name]: Dialog
    },
  }
</script>
<style scoped>
  .orderdetail{ width: 100%; margin-bottom: 2rem;}
  .orderdetail .adddelation{ padding: .5rem .3rem; background: #fff; position: relative; border-bottom: 1px solid #F9F9F9;}
  .orderdetail .adddelation span{ overflow: hidden; display: block;}
  .orderdetail .adddelation span h2{ font-size: .35rem; font-weight: normal; color: #323232; margin-bottom: .4rem;}
  .orderdetail .adddelation p{ display: block; width: 85%; color: #666; font-size: .35rem;}
  .orderdetail .adddelation i{ position: absolute; color: #c7c7cc; right: .3rem; top: 1.25rem;}
  .orderdetail .productdetail{ padding: .3rem; overflow: hidden; position: relative; border-bottom: 1px solid #ececec;}
  .orderdetail .productdetail i{ width: 30%;}
  .orderdetail .productdetail i img{ width: 100%; }
  .orderdetail .productdetail span{ width: 65%; font-size: .35rem; margin: 0 2%; color: #666;}
  .orderdetail .productdetail span p{ width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .orderdetail .productdetail span label{ margin-top: .1rem; display: block; color: #B1A99C; font-size: .32rem;}
  .orderdetail .productdetail b{ position: absolute; font-weight: normal; font-size: .5rem; right: .5rem; top: 1.7rem; color: #ea8800;}
  .orderdetail .buynub{ width: 100%; background-color: #fff; padding: .4rem 0; overflow: hidden;}
  .orderdetail .buynub h3{ font-size: .35rem; margin-left: .3rem; font-weight: normal; line-height: .3rem; color: red;}
  .orderdetail .buynub div{ margin-right: .5rem; height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
  .orderdetail .buynub div span{ text-align: center; height: .6rem; line-height: .6rem;}
  .orderdetail .buynub div span:nth-of-type(1){ border-right: 1px solid #ac956c;}
  .orderdetail .buynub div span:nth-of-type(2){ border-left: 1px solid #ac956c;}
  .orderdetail .buynub div span i{ padding:0 .2rem; color: #ac956c; }
  .orderdetail .buynub div input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
  .allOrder{ width: 100%; position: fixed; bottom: 0; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
  .allOrder p{ font-size: .35rem; color: #666; margin: .5rem .3rem 0;}
  .allOrder p label{ font-size: .35rem; color: #ea8800; }
  .sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .5rem 0;}
  .isradio{ width:75%; display: flex; margin-top: .1rem;}.ptcheck{ margin-left: 6%;}.margin_r{margin-right: 6%;}
  .c-title{ margin-bottom: .2rem;color: #999;}
  .express-tips{ color: #ea8800;margin-top: .1rem;}
  .product-t{    color: #666;font-size: .35rem;padding: 0 .2rem;background-color: #f6f6f6;}
  .product-t i{color: #ea8800;font-style:normal}
  .status-box{ color: #fff;}
  .icon-t{margin-right: .1rem;font-size: .5rem;}

  .productdetail ul{ overflow: hidden; }
  .productdetail ul li{ width: 100%; display: flex; background: #fff; position: relative; padding: .3rem 0; border-bottom: 1px solid #F3F3F3; box-sizing: border-box;}
  .productdetail ul li span{ width: 30%; height: 2.5rem; overflow: hidden; display: inline-block; margin-left: .1rem;}
  .productdetail ul li span img{ width: 100%;}
  .productdetail ul li .prter{ width: 55%; display: inline-block;}
  .productdetail ul li .prter p{ width: 50%; padding: 0 .2rem; font-size: .35rem; display: block; color: #323232; border: 0; text-align: left;}
  .productdetail ul li .prter p:nth-of-type(1){ margin-bottom: .1rem; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .productdetail ul li .prter label{ font-size: .35rem; color: #FD9709; font-style: normal; margin-top: .4rem; display: block;}
  .productdetail ul li .prter label i{ font-style: normal; padding: 0 .2rem;}
</style>
